<template>
  <div>
    <input type="number" v-model="todoId" />
    <pre>{{ data }}</pre>
  </div>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue'
const todoId = ref(1)
const data = ref(null)

let controller = null // 用于存储 AbortController 实例

// watch(todoId, async (newId, oldId,onCleanup) => {
//   // 如果之前有未完成的请求，则取消它
//   if (controller) {
//     controller.abort()
//   }

//   // 创建一个新的 AbortController 实例
//   controller = new AbortController()

//   // 清理请求
//   onCleanup(() => {
//     controller.abort() // 清理时取消请求
//     console.log(`清理完成`)
//   })

//   try {
//     const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${newId}`, { signal: controller.signal })
//     if (!response.ok) {
//       throw new Error('网络响应失败')
//     }
//     data.value = await response.json()
//   } catch (error) {
//     if (error.name === 'AbortError') {
//       console.log(`请求ID为 ${oldId} 的请求被取消`)
//     } else {
//       console.error('请求失败:', error)
//     }
//   }
// }, { immediate: true })

// watchEffect(async (onCleanup) => {
//   // 如果之前有未完成的请求，则取消它
//   if (controller) {
//     controller.abort()
//   }

//   // 创建一个新的 AbortController 实例
//   controller = new AbortController()

//   // 清理请求
//   onCleanup(() => {
//     controller.abort() // 清理时取消请求
//   })

//   try {
//     const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`, { signal: controller.signal })
//     if (!response.ok) {
//       throw new Error('网络响应失败')
//     }
//     data.value = await response.json()
//   } catch (error) {
//     if (error.name === 'AbortError') {
//       console.log(`请求被取消`)
//     } else {
//       console.error('请求失败:', error)
//     }
//   }
// })

watch(
  todoId,
  async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`,
    )
    data.value = await response.json()
  },
  { immediate: true },
)

// watchEffect(async () => {
//   const response = await fetch(
//     `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
//   )
//   data.value = await response.json()
// })
</script>
